<template>
	<view>
		<view class="address-container">
			<view class="from">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to">
				<text>{{ to.address }}</text>
			</view>
		</view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toInProcessOrder">您有进行中的订单,点击查看</view>
		<map
			id="map"
			:longitude="from.longitude"
			:latitude="from.latitude"
			:style="contentStyle"
			scale="16"
			:enable-traffic="false"
			:show-location="true"
			class="map"
			:polyline="polyline"
			:markers="markers"
		></map>

		<view class="panel">
			<view class="row">
				<view class="info">
					<view class="label">全程</view>
					<view class="value">
						<text>{{ distance }}</text>
						公里
					</view>
					<view class="label">，预计</view>
					<view class="value">
						<text>{{ duration }}</text>
						分钟
					</view>
				</view>
				<view class="opt" @tap="chooseCarHandle" v-if="!showCar">选择车辆</view>
				<view class="opt" @tap="chooseCarHandle" v-if="showCar">{{ car.carType }}{{ car.carPlate }}</view>
			</view>
			<button class="btn" @tap="createOrderHandle">确定下单</button>
		</view>
		<u-popup v-model="showPopup" mode="center" width="600" height="280" :mask-close-able="false">
			<view class="popup-title">您的订单正在等待司机接单</view>
			<view class="count-down">
				<u-count-down
					ref="uCountDown"
					:timestamp="timestamp"
					:autoplay="false"
					separator="zh"
					:show-hours="false"
					:show-border="true"
					bg-color="#DDF0FF"
					separator-color="#0083F3"
					border-color="#0D90FF"
					color="#0D90FF"
					font-size="32"
					@end="countEndHandle"
					@change="countChangeHandle"
				></u-count-down>
				<!-- @change="countChangeHandle" -->
				
			</view>
			<button class="btn" @tap="cancelHandle">取消订单</button>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="uModalShow" 
		show-confirm-button="继续等待"
		show-cancel-button="确定取消"
		@confirm="confirm" ref="uModal" :async-close="true"></u-modal>

	</view>
</template>

<script>
let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
let qqmapsdk;
export default {
	data() {
		return {
			//订单路线：开始位置和结束位子
			from: {
				address: '',
				longitude: 0,
				latitude: 0
			},
			to: {
				address: '',
				longitude: 0,
				latitude: 0
			},
			//窗口样式
			contentStyle: '',
			windowHeight: 0,
			//距离和时长
			distance: 0,
			duration: 0,
			//路线规划，路线坐标和图标
			polyline: [],
			markers: [],
			
			//
			infoStatus: true,
			car:{
				//乘客选择的车辆
				carId: null,
				carPlate: null,
				carType: null,
			},
			showCar: false,
			showPopup: false,
			timestamp: 30,
			timestampStaring:false,
			orderNo: null,
			//地图组件
			map:null,
			//接单的定时任务
			acceptOrderTimer:null,
			uModalShow:false,
			//是否有进行中的订单
			inPorcessOrderId:null
		};
	},
	methods: {
    //倒计时完成：自动取消订单
    countEndHandle(){
      let _this = this;
      _this.post("/order/app/order/auto/cancel/"+_this.orderNo,(res)=>{
        let {success,data,message} = res.data;
        if(success){
          uni.showToast({
            title:"订单已经自动取消",icon:"success"
          })
          //关闭弹窗，时间重置
          _this.showPopup = false;
          _this.timestamp=  10;
        }
      });
    },
    //确定下单
    createOrderHandle(){
      let _this = this;
      let param = {
        carPlate: _this.car.carPlate,
        carType: _this.car.carType,
        expectsMileage:_this.distance,	//里程
        expectMinutes:_this.duration,	//分钟数
        startPlace: _this.from.address,
        endPlace:_this.to.address,
        startPlaceLongitude: _this.from.longitude,
        startPlaceLatitude:_this.from.latitude,
        endPlaceLongitude:_this.to.longitude,
        endPlaceLatiude: _this.to.latitude,
      };

      _this.post("/order/app/order/create",param,(res)=>{
        let {success,data,message}  =res.data;
        if(success){
          //倒计时
          _this.showPopup = true;
          _this.$refs.uCountDown.start();
          //把订单号存储起来
          _this.orderNo = data;
        }else{
          uni.showToast({
            title:message , icon:"error"
          })
        }
      });

    },
    //选择车辆
    chooseCarHandle(){
      uni.navigateTo({
        url:"/pages/car_list/car_list"
      })
    },
    //路线规划
    drawLine(){
      var _this = this;
      //调用距离计算接口
      qqmapsdk.direction({
        mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
        //from参数不填默认当前地址
        from: _this.from,
        to: _this.to,
        success: function (res) {
          var ret = res;

          //距离米
          let distance = ret.result.routes[0].distance;
          //时长分钟，
          let duration = ret.result.routes[0].duration;

          _this.distance = distance / 1000;
          _this.duration = duration;

          var coors = ret.result.routes[0].polyline, pl = [];
          //坐标解压（返回的点串坐标，通过前向差分进行压缩）
          var kr = 1000000;
          for (var i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
          }
          //将解压后的坐标放入点串数组pl中
          for (var i = 0; i < coors.length; i += 2) {
            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
          }

          _this.polyline = [{
            points:pl,
            color:"#ff0000",
            width:4,
            arrowLine:true
          }];

          //画图标
          _this.markers = [
            {
              id:1,
              latitude:_this.from.latitude,
              longitude:_this.from.longitude,
              title:_this.from.address,
              iconPath:"/static/order/start.png"
            },
            {
              id:2,
              latitude:_this.to.latitude,
              longitude:_this.to.longitude,
              title:_this.to.address,
              iconPath:"/static/order/end.png"
            },
          ];


        },
        fail: function (error) {
          console.error(error);
        },
        complete: function (res) {
          console.log(res);
        }
      });
    },
    //初始化地图
    initMap(){
      let _this = this;
      qqmapsdk = new QQMapWX({
        key: this.Consts.QQMAP_KEY // 必填
      });
      //路线规划
      _this.drawLine();
    },
		//初始化窗口样式
		initStyle(){
			let _this = this;
			//处理窗口样式
			let windowHeight = uni.getSystemInfoSync().windowHeight;
			_this.windowHeight = windowHeight;
			_this.contentStyle = `height:${_this.windowHeight}px;`;
		},
		
	},
	onLoad: function(options) {
		let _this = this;
		
		_this.initStyle();
    //_this.from = uni.getStorageSync("from");
    //_this.to = uni.getStorageSync("to");

    _this.initMap();
	},
	onShow: function() {
    let _this = this;
    let car = uni.getStorageSync("car");
    if(car){
      _this.showCar = true;
      _this.car = car;
    }
	},
	onUnload() {
	}
};
</script>

<style lang="less">
@import url('create_order.less');

</style>
